<template>
  <common-page :title="isEdit ? '编辑' : '详情'">
    <div slot="header">
      <el-button @click="$emit('close')">返回</el-button>
      <el-button type="primary" @click="submit" :loading="loading" v-if="isEdit"
        >保存
      </el-button>
    </div>
    <div slot="content" class="common-page-content">
      <div class="content-wrap">
        <el-form
          :model="form"
          ref="form"
          :inline="true"
          label-width="110px"
          @submit.native.prevent
        >
          <el-row :gutter="20">
            <el-col :span="24">
              <common-group-title title="敏感分类"></common-group-title>
            </el-col>
            <el-col :span="24">
              <common-table :data="tableData" border class="table-content">
                <el-table-column
                  prop="names"
                  label="类别"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="score"
                  label="百分比（%）"
                  width="150"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <common-input-integer
                      v-model="scope.row.score"
                      :disabled="isEdit ? false : true"
                    ></common-input-integer>
                  </template>
                </el-table-column>
              </common-table>
            </el-col>

            <!--
            <el-col :span="24">
              <el-collapse v-model="activeName" accordion>
                <el-collapse-item title="数据分类" name="1">
                  <el-table
                    :data="table1_1"
                    :header-cell-style="{ background: '#f5f7fa' }"
                    border
                    class="table-content"
                  >
                    <el-table-column
                      prop="typeName"
                      label="类别名称"
                      show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column
                      prop="score"
                      label="百分比（%）"
                      width="150"
                      show-overflow-tooltip
                    >
                      <template slot-scope="scope">
                        <common-input-integer
                          v-model="scope.row.score"
                          :disabled="isEdit ? false : true"
                        ></common-input-integer>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-collapse-item>
                <el-collapse-item title="重要数据" name="2">
                  <el-table
                    :data="table1_2"
                    :header-cell-style="{ background: '#f5f7fa' }"
                    border
                    class="table-content"
                  >
                    <el-table-column
                      prop="tagName"
                      label="类别名称"
                      show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column
                      prop="score"
                      label="百分比（%）"
                      width="150"
                      show-overflow-tooltip
                    >
                      <template slot-scope="scope">
                        <common-input-integer
                          v-model="scope.row.score"
                          :disabled="isEdit ? false : true"
                        ></common-input-integer>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-collapse-item>
                <el-collapse-item title="核心数据" name="3">
                  <el-table
                    :data="table1_3"
                    :header-cell-style="{ background: '#f5f7fa' }"
                    border
                    class="table-content"
                  >
                    <el-table-column
                      prop="coreName"
                      label="类别名称"
                      show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column
                      prop="score"
                      label="百分比（%）"
                      width="150"
                      show-overflow-tooltip
                    >
                      <template slot-scope="scope">
                        <common-input-integer
                          v-model="scope.row.score"
                          :disabled="isEdit ? false : true"
                        ></common-input-integer>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-collapse-item>
                <el-collapse-item title="敏感数据" name="4">
                  <el-table
                    :data="table1_4"
                    :header-cell-style="{ background: '#f5f7fa' }"
                    border
                    class="table-content"
                  >
                    <el-table-column
                      prop="wordName"
                      label="类别名称"
                      show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column
                      prop="score"
                      label="百分比（%）"
                      width="150"
                      show-overflow-tooltip
                    >
                      <template slot-scope="scope">
                        <common-input-integer
                          v-model="scope.row.score"
                          :disabled="isEdit ? false : true"
                        ></common-input-integer>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-collapse-item>
              </el-collapse>
            </el-col>-->

            <el-col :span="24">
              <common-group-title title="脆弱性"></common-group-title>
            </el-col>

            <el-col :span="24">
              <common-table :data="tableData2" border class="table-content">
                <el-table-column
                  prop="weakName"
                  label="类别"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="score"
                  label="百分比（%）"
                  width="150"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <common-input-integer
                      v-model="scope.row.score"
                      :disabled="isEdit ? false : true"
                    ></common-input-integer>
                  </template>
                </el-table-column>
              </common-table>
            </el-col>

            <el-col :span="24">
              <common-group-title title="行为基线"></common-group-title>
            </el-col>

            <el-col :span="24">
              <common-table :data="tableData3" border class="table-content">
                <el-table-column
                  prop="baseName"
                  label="类别"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="score"
                  label="百分比（%）"
                  width="150"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <common-input-integer
                      v-model="scope.row.score"
                      :disabled="isEdit ? false : true"
                    ></common-input-integer>
                  </template>
                </el-table-column>
              </common-table>
            </el-col>

            <el-col :span="24">
              <common-group-title title="异常访问"></common-group-title>
            </el-col>

            <el-col :span="24">
              <common-table :data="tableData4" class="table-content">
                <el-table-column
                  prop="visitName"
                  label="类别"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="score"
                  label="百分比（%）"
                  width="150"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <common-input-integer
                      v-model="scope.row.score"
                      :disabled="isEdit ? false : true"
                    ></common-input-integer>
                  </template>
                </el-table-column>
              </common-table>
            </el-col>

            <el-col :span="24">
              <common-group-title title="OWASP风险"></common-group-title>
            </el-col>

            <el-col :span="24">
              <common-table :data="tableData5" border class="table-content">
                <el-table-column
                  prop="riskName"
                  label="类别"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="score"
                  label="百分比（%）"
                  width="150"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <common-input-integer
                      v-model="scope.row.score"
                      :disabled="isEdit ? false : true"
                    ></common-input-integer>
                  </template>
                </el-table-column>
              </common-table>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </common-page>
</template>

<script>
import { fetchDetail, modelEdit } from "@/api/apisecurity/model/model";
export default {
  props: {
    isEdit: {
      type: Boolean,
      default: false,
    },
    currentId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      form: {},
      loading: false,
      tableData: [],
      tableData2: [],
      tableData3: [],
      tableData4: [],
      tableData5: [],

      activeName: "1",
      table1_1: [],
      table1_2: [],
      table1_3: [],
      table1_4: [],
      table1_5: [],
      id: "",
    };
  },

  mounted() {
    this.getDetail();
  },
  methods: {
    getDetail() {
      fetchDetail({ id: this.currentId }).then((res) => {
        if (res && res.code === 200) {
          let data = res.data;
          this.id = data.id;
          //敏感分类(数据分类)
          this.table1_1 = data.dataTypeList.map((item) => {
            return {
              score: this.getStringScore(item.score),
              name: item.name,
              id: item.typeId,
              names: item.typeName,
            };
          });

          //敏感分类(重要数据)
          this.table1_2 = data.dataTagList.map((item) => {
            return {
              score: this.getStringScore(item.score),
              name: item.name,
              id: item.tagId,
              names: item.tagName,
            };
          });

          //敏感分类(核心数据)
          this.table1_3 = data.dataCoreList.map((item) => {
            return {
              score: this.getStringScore(item.score),
              name: item.name,
              id: item.coreId,
              names: item.coreName,
            };
          });

          //敏感分类(敏感数据)
          this.table1_4 = data.dataSensitiveList.map((item) => {
            return {
              score: this.getStringScore(item.score),
              name: item.name,
              id: item.wordId,
              names: item.wordName,
            };
          });
          this.tableData = [
            ...this.table1_1,
            ...this.table1_2,
            ...this.table1_3,
            ...this.table1_4,
          ];
          //脆弱性
          this.tableData2 = data.weakList.map((item) => {
            return {
              score: this.getStringScore(item.score),
              name: item.name,
              weakId: item.weakId,
              weakName: item.weakName,
            };
          });

          //行为基线
          this.tableData3 = data.baseLineList.map((item) => {
            return {
              score: this.getStringScore(item.score),
              name: item.name,
              baseId: item.baseId,
              baseName: item.baseName,
            };
          });

          //异常访问
          this.tableData4 = data.execVisitList.map((item) => {
            return {
              score: this.getStringScore(item.score),
              name: item.name,
              visitId: item.visitId,
              visitName: item.visitName,
            };
          });
          //OWASP风险
          this.tableData5 = data.riskList.map((item) => {
            return {
              score: this.getStringScore(item.score),
              name: item.name,
              riskId: item.riskId,
              riskName: item.riskName,
            };
          });
        }
      });
    },

    getStringScore(score) {
      return score || score === 0 ? score.toString() : "0";
    },

    //保存
    submit() {
      let table1_1 = this.table1_1.map((item) => {
        return {
          score: this.getStringScore(item.score),
          name: item.name,
          typeId: item.id,
          typeName: item.names,
        };
      });
      //敏感分类(重要数据)
      let table1_2 = this.table1_2.map((item) => {
        return {
          score: this.getStringScore(item.score),
          name: item.name,
          tagId: item.id,
          tagName: item.names,
        };
      });

      //敏感分类(核心数据)
      let table1_3 = this.table1_3.map((item) => {
        return {
          score: this.getStringScore(item.score),
          name: item.name,
          coreId: item.id,
          coreName: item.names,
        };
      });

      //敏感分类(敏感数据)
      let table1_4 = this.table1_4.map((item) => {
        return {
          score: this.getStringScore(item.score),
          name: item.name,
          wordId: item.id,
          wordName: item.names,
        };
      });
      modelEdit({
        id: this.id,
        dataTypeList: table1_1,

        dataTagList: table1_2,
        dataCoreList: table1_3,
        dataSensitiveList: table1_4,

        weakList: this.tableData2,
        baseLineList: this.tableData3,
        execVisitList: this.tableData4,
        riskList: this.tableData5,
      }).then((res) => {
        if (res && res.code === 200) {
          this.$GlobalSuccessMessage("保存成功");
          this.$emit("submitForm");
        } else {
          this.$GlobalErrorConfirm("保存失败", res.msg);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .common-page-content {
  overflow-y: auto !important;
}

::v-deep .el-table__header {
  font-size: 14px;
}

::v-deep .el-table__body {
  font-size: 14px;
}
.content-wrap {
  width: 70%;
  margin: 20px auto;
}
.table-content {
  margin-top: 0;
  margin-bottom: 20px;
}
::v-deep .el-input.is-disabled .el-input__inner {
  background-color: #fff;
  color: #606266 !important;
}
</style>
